<template>
  <div class="app-container d-flex">
    <div class="header-title">1号楼2层拓扑图</div>
    <div class="tree" id="tree" @click="closeMenu"></div>

    <div v-if="menuVisible" class="context-menu" :style="menuStyle">
      <span class="el-dropdown-link" @click="showInfo">展开</span>
    </div>

    <el-dialog :title="dialogTitle" custom-class="treeopen" :visible.sync="dialogVisible">
      <div class="app-container d-flex" v-if="crrentDataList.length > 0">
        <div class="tree" id="ptree"></div>
      </div>
      <div class="msg" v-else>{{resultMsg}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import charts from './chart.js'
  import { getDeviceTreeListV2, getDeviceTreeList } from "@/api/dormOneBuildingOneFloor/system";

  export default {
    components: {},
    data() {
      return {
        dataList: [],
        timeout: -1,
        freshTimeout: -1,
        flag: 1,
        colors: ['#aaaaaa', '#00ff00', '#ffff00', '#ff0000'],
        hzColors: [],
        menuVisible: false,
        menuStyle: {},
        dialogVisible: false,
        keyType: '3-1',
        topCode: 'TPO012',
        crrentCode: '',
        crrentDataList: [],
        dialogTitle: '',
        resultMsg: '',
      }
    },
    created() {
      this.queryInitData();

      this.timeout = setInterval(() => {
        this.queryInitData();
      }, 15 * 1000);
    },
    mounted() {

    },
    beforeDestroy() {
      clearInterval(this.timeout);
      clearInterval(this.freshTimeout);
      charts.creanTime();
    },
    methods: {
      rightClick(param) {
        let event = param.event.event;
        this.crrentCode = param.data.deviceCode;
        this.dialogTitle = param.data.deviceName;
        event.preventDefault();
        // 设置菜单的位置
        this.menuStyle = {
          top: `${event.clientY}px`,
          left: `${event.clientX + 10}px`
        };

        this.menuVisible = true;
      },

      closeMenu() {
        this.menuVisible = false;
      },

      generateRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }

        if(this.hzColors.includes(color)) {
          return this.generateRandomColor();
        } else {
          return color;
        }
      },

      getHZColor(type) {
        if(!this.hzColors[type]) {
          this.hzColors[type] = this.generateRandomColor();
        }
        return this.hzColors[type];
      },

      showInfo() {
        this.closeMenu();
        getDeviceTreeList({devcCode: this.crrentCode}).then(res => {
          if (res.status == 200) {
            this.crrentDataList = res.object || [];

            if (this.crrentDataList.length > 0) {
              for (let i in this.crrentDataList) {
                this.crrentDataList[i].flag = 1;
                this.crrentDataList[i].name = "0_1";
                this.flag = 1;
                this.crrentDataList[i].info = [
                  {name: "设备名称", value: this.crrentDataList[i].deviceName},
                  {name: "配电箱名称", value: this.crrentDataList[i].pdxDeviceName}
                ]
                this.formDataList(this.crrentDataList[i], 1);
              }
            }
          } else {
            this.crrentDataList = [];
            this.resultMsg = res.message;
          }

          this.dialogVisible = true;
          this.$nextTick(() => {
            if (charts.getDataReady()) {
              charts.treeEchart("ptree", this.crrentDataList);
            } else {
              setTimeout(() => {
                charts.treeEchart("ptree", this.crrentDataList);
              }, 300)
            }
          })
        })
      },

      formDataList(data, level) {
        if (data.childrenList && data.childrenList.length > 0) {
          data.children = data.childrenList;
          for (let i in data.children) {
            this.flag++;
            data.children[i].flag = this.flag;
            data.children[i].name = level + '_' + this.flag;
            data.children[i].lineStyle = {
              color: data.children[i].lineColor == null ? 'blue' : this.colors[data.children[i].lineColor + 1]
            }

            let pdx = require('@/assets/icon/pdx.png');
            let czKg = require('@/assets/icon/czKg.png');
            let ktKg = require('@/assets/icon/ktKg.png');
            let zmKg = require('@/assets/icon/zmKg.png');
            let ysj = require('@/assets/icon/ysj.png');
            let xyj = require('@/assets/icon/xyj.png');
            let otherKg = require('@/assets/icon/otherKg.png');

            let src = null

            if (data.children[i].deviceName.indexOf('配电箱') != -1) {
              src = pdx
            } else if(data.children[i].deviceName.indexOf('空调开关') != -1) {
              src = ktKg
            } else if(data.children[i].deviceName.indexOf('插座开关') != -1) {
              src = czKg
            } else if(data.children[i].deviceName.indexOf('照明开关') != -1) {
              src = zmKg
            } else if(data.children[i].deviceName.indexOf('饮水机') != -1) {
              src = ysj
            } else if(data.children[i].deviceName.indexOf('洗衣机') != -1) {
              src = xyj
            } else {
              src = otherKg
            }

            data.children[i].label = {
              backgroundColor: {
                image: src
              },
              shadowColor: data.children[i].pdxDeviceColor, //this.getHZColor(data.children[i].pdxDeviceColor),
              shadowOffsetY: -6,
            }

            data.children[i].info = [
              {name: "设备名称", value: data.children[i].deviceName},
              {name: "配电箱名称", value: data.children[i].pdxDeviceName}
            ]
            if (data.children[i].childrenList && data.children[i].childrenList.length > 0) {
              this.formDataList(data.children[i], level + 1);
            }
          }
        }
      },

      queryInitData() {
        getDeviceTreeListV2({topCode: this.topCode}).then(res => {
          if (res.status == 200) {
            this.dataList = res.object || [];

            if (this.dataList.length > 0) {
              for (let i in this.dataList) {
                this.dataList[i].flag = 1;
                this.dataList[i].name = "0_1";
                this.flag = 1;
                this.dataList[i].info = [
                  {name: "设备名称", value: this.dataList[i].deviceName},
                  {name: "配电箱名称", value: this.dataList[i].pdxDeviceName}
                ]
                this.dataList[i].label = {
                  shadowColor: this.dataList[i].pdxDeviceColor, //this.getHZColor(this.dataList[i].pdxDeviceColor),
                  shadowOffsetY: -6,
                }
                this.formDataList(this.dataList[i], 1);
              }
            }
          }

          this.$nextTick(() => {
            this.setTreeData();
          })
        })
      },

      setTreeData() {
        clearTimeout(this.freshTimeout);
        if (charts.getDataReady()) {
          // charts.treeEchart("tree", this.dataList, this.rightClick, this.closeMenu);
          charts.treeEchart("tree", this.dataList, null, this.closeMenu);
        } else {
          this.freshTimeout = setTimeout(() => {
            this.setTreeData();
          }, 300)
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
  .app-container {
    position: relative;
  }

  .header-title {
    padding: 20px;
    position: absolute;
    font-size: 20px;
    color: #6ca7b4;

    &:before {
      content: '';
      width: 12px;
      height: 12px;
      margin-right: 8px;
      background: #83c95c;
      border-radius: 50%;
      display: inline-block;
    }
  }

  .tree {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .context-menu {
    position: fixed;
    z-index: 1000;

    .el-dropdown-link {
      background-color: #235056;
      border-radius: 4px;
      padding: 10px 15px;
      box-shadow: 0px 0px 27px 0px rgba(154, 200, 233, 0.22) inset, 0px 0px 5.2px 0px #6ca7b4;
      color: #6ca7b4;
      font-size: 14px;
      cursor: pointer;
    }
  }

  ::v-deep .treeopen.el-dialog {
    background: radial-gradient(#074b56, #051b1f);
    width: 1757px;
    margin-top: 40px !important;
    border-radius: 8px;
    overflow: hidden;

    .el-dialog__header {
      background: #024c57;
      height: 48px;
      line-height: 48px;
      padding: 0 20px;

      .el-dialog__title {
        font-size: 16px;
        color: #5cdbe5;
      }

      .el-dialog__headerbtn {
        top: 14px;
      }

      .el-dialog__close {
        font-size: 20px;
        color: #5cdbe5;
      }
    }

    .el-dialog__body {
      height: 680px;
      padding: 0 30px;

      .msg {
        padding-top: 100px;
        font-size: 30px;
        color: #5cdbe5;
        text-align: center;
      }
    }

    .el-dialog__footer {
      text-align: center;
      padding-bottom: 50px;

      .el-button {
        width: 92px;
        height: 36px;
        background: #3ea5ac;
        border: none;
        border-radius: 2px;
      }
    }
  }
</style>
